<template>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path:'/adminhome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/adminhome'}">用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户操作</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card class="box-card">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable>
          <el-button slot="append" icon="el-icon-search" @click="getVipUser" ></el-button>
        </el-input>
        </el-col>
        </el-row>
        <el-table  :data="usertableData" style="width: 100%;"  stripe border>
           <el-table-column type="index" label="序号"></el-table-column>
           <el-table-column prop="carId" label="车牌号"></el-table-column>
           <el-table-column prop="vipName" label="姓名"></el-table-column>
           <el-table-column prop="vipIphone" label="手机号"></el-table-column>
           <el-table-column prop="vipEmail" label="邮箱"></el-table-column>
           <el-table-column prop="vipScore" label="积分"></el-table-column>
             <el-table-column label="操作" width="120">
                 <template slot-scope="scope">
                   <el-button @click="deleteUser(scope.row)" type="text"size="medium">
                     移除
                   </el-button>
                   <el-button @click="updateUserBtn(scope.row)" type="text"size="medium">
                     修改
                   </el-button>
                 </template>
               </el-table-column>
        </el-table>
        <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="queryInfo.pageNum"
           :page-sizes="[5, 10, 20, 40]"
           :page-size="queryInfo.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
         </el-pagination>
   </el-card>
   <el-dialog title="用户修改:" :visible.sync="dialogFormVisible" width="50%" @close="closeDialog">
     <el-form :model="updateVipUserFrom"  ref="updateVipUserRuleForm" label-width="120px" :rules="VipRules">
       <el-form-item label="车牌号" prop="carId">
         <el-input prefix-icon="el-icon-truck" v-model="updateVipUserFrom.carId"></el-input>
       </el-form-item>
       <el-form-item label="车主姓名" prop="vipName">
         <el-input prefix-icon="el-icon-s-custom" v-model="updateVipUserFrom.vipName"></el-input>
       </el-form-item>
       <el-form-item label="手机号"  prop="vipIphone">
         <el-input  prefix-icon="iconfont iconuser" v-model="updateVipUserFrom.vipIphone" disabled></el-input>
       </el-form-item>
       <el-form-item label="邮箱" prop="vipEmail">
         <el-input prefix-icon="el-icon-edit-outline" v-model="updateVipUserFrom.vipEmail"></el-input>
       </el-form-item>
     </el-form>
     <div slot="footer">
       <el-button @click="dialogFormVisible = false" icon="el-icon-close" type="warning" round>取 消</el-button>
       <el-button type="primary" @click="updateVipUser"  icon="el-icon-check" round>确 定</el-button>
     </div>
   </el-dialog>
  </div>
</template>

<script>
  export default{
    data(){
      //校验邮箱规则
            const checkEmail = (rule, value, callback) => {
              //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
              const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
              if (emailRege.test(value)) {
                //表示邮箱合法 正确返回
                return callback()
              }
              callback(new Error('请填写正确的邮箱地址'))
            }

            //校验手机号的邮箱规则
            const checkPhone = (rule, value, callback) => {

              //定义校验手机号的正则语法
              const phoneRege = /^1[3456789][0-9]{9}$/
              if (phoneRege.test(value)) {

                return callback()
              }
              callback(new Error('请填写正确的手机号'))

            }
      return{
        dialogFormVisible:false,
        queryInfo:{
          query:'', //用户查询的数据
          pageNum:1,  //分页的页数
          pageSize:5 //每页的条数
        },
        total:0,
        usertableData:[],
        updateVipUserFrom:{
          carId:'',
          vipName:'',
          vipIphone:'',
          vipEmail:''
        },
        VipRules:{
          carId:[
            { required: true, message: '请输入车牌号', trigger: 'blur' },
            { min: 7, max:7, message: '请输入正确的车牌号', trigger: 'blur'}
          ],
          vipName:[
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max:5, message: '请输入正确的姓名', trigger: 'blur'}
          ],
          vipIphone:[
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max:11, message: '请输入正确的手机号', trigger: 'blur'},
            { validator: checkPhone, trigger: 'blur' }
          ],
          vipEmail:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { min: 3, max:20, message: '长度在 3-20 个字符', trigger: 'blur'},
            { validator: checkEmail, trigger: 'blur' }
          ]},

      }
    },
    methods:{
      async getVipUser(){
        const{data:result}= await this.$http.get('/vipuser/getVipUser',{
          params:this.queryInfo
        })
        if(result.status!==200){return this.$message.error('获取用户失败')}
        this.usertableData=result.data.rows
        this.total=result.data.total
      },
      handleSizeChange(pageSize){
        this.queryInfo.pageSize=pageSize
        this.getVipUser()
      },
      handleCurrentChange(pageNum){
        this.queryInfo.pageNum=pageNum
        this.getVipUser()
      },
      async deleteUser(vipUser){
        const result=await this.$confirm('提示:此操作将永久删除该用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error=>error)
        if(result==='cancel'){return this.$message.info('用户取消操作')}
         const{data:res}= await this.$http.delete(`vipuser/deleteUser/${vipUser.carId}`)
         if(res.status!==200){this.$message.error('删除失败')}
         this.$message.success('用户删除成功')
         this.getVipUser()
      },
      updateUserBtn(vipUser){
        this.dialogFormVisible=true
        this.updateVipUserFrom=vipUser
      },
      closeDialog(){
        this.$refs.updateVipUserRuleForm.resetFields()
      },
      async updateVipUser(){
        const{data:result}= await this.$http.put('vipuser/updateVipUser',this.updateVipUserFrom)
        if(result.status!==200){return this.$message.error('修改用户失败')}
        this.$message.success('修改用户成功')
        this.dialogFormVisible=false
        this.getVipUser()
      }
    },
    mounted(){
      this.getVipUser()
    }
  }
</script>

<style lang="less" scoped>
</style>
